.custom-header{
  position: absolute; z-index: 90;
  width: 100%;

  .g-title{
    color: #999;
  }
}

.custom-main{
  position: relative;

  .step{
    position: absolute; left: 34%;
    width: 25.4%; height: 4.75%;
    cursor: pointer;
    background: url("about:target");

    &.step1{
      top: (226/1136)*100+%;
    }
    &.step2{
      top: (352/1136)*100+%;
    }
    &.step3{
      top: (480/1136)*100+%;
    }
    &.step4{
      top: (605/1136)*100+%;
    }
    &.step5{
      top: (730/1136)*100+%;
    }
  }
}

.aside-step{
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: 36%;
  background-color: rgba(0, 0, 0, .8);
  transition: all .3s ease;
  transform: translateX(100%);
  &.is-active{
    transform: translateX(0);
  }

  &-con{
    position: relative; top: 50%;
    transform: translateY(-50%);
    padding: 0 10%;
    color: #ccc;

    .title{
      font-size: 20px;
      padding: .12rem 0;
      border-top: 1px solid #c69c6d;
      border-bottom: 1px solid #c69c6d;
    }
    .summary{
      margin-top: .8rem;
      text-align: justify;
      line-height: 1.5;
    }
  }

}
